<template>
    <section>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>报警记录</span>
            </div>
            <div class="dctable_box table_box">
                <el-table :header-cell-style="{
                    background: '#03393a7e',
                    color: '#06f5d1',
                    border: 'none'
                  }" size="mini" v-if="devicedata.subsystem == 'iot_ips'" :cell-style="tableStyle" :data="maintainDataList" style="width: 100%">
                  <!-- <el-table-column prop="createTime" label="报警时间" >
                </el-table-column>
                <el-table-column prop="name" label="名称" >
                </el-table-column>
                <el-table-column prop="valueType" label="报警内容" >
                </el-table-column>
                <el-table-column prop="description" label="描述">
                </el-table-column> -->
                <el-table-column prop="originTime" label="报警时间" >
                    <template slot-scope="scope" v-if="scope.row.originTime">
                        {{$root.getDateArray(scope.row.originTime)[9]}}
                    </template>
                </el-table-column>
                <el-table-column prop="deviceName" label="名称" >
                </el-table-column>
                <el-table-column prop="type" label="报警内容" >
                </el-table-column>
                <el-table-column prop="content" label="描述">
                </el-table-column>
                </el-table>
                <el-table v-else :header-cell-style="{
                    background: '#03393a7e',
                    color: '#06f5d1',
                    border: 'none'
                  }" size="mini" :cell-style="tableStyle" :data="maintainDataList" style="width: 100%">
                    <!-- <el-table-column prop="date" label="报警时间" width="180">
                    </el-table-column>
                    <el-table-column prop="" label="报警内容" width="180">
                        <span style="color: red;">温度异常</span>
                    </el-table-column>
                    <el-table-column prop="name" label="负责人" width="180">
                    </el-table-column>
                    <el-table-column prop="phone" label="联系号码">
                    </el-table-column> -->
                    <el-table-column prop="originTime" label="报警时间" >
                        <template slot-scope="scope" v-if="scope.row.originTime">
                            {{$root.getDateArray(scope.row.originTime)[9]}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="deviceName" label="名称" >
                    </el-table-column>
                    <el-table-column prop="type" label="报警内容" >
                    </el-table-column>
                    <el-table-column prop="content" label="描述">
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <span class="total">
                        <span> 总条数：{{totaldata}} 条</span>
                      </span>
                <el-pagination layout="prev, pager, next" 
                    @current-change="handleCurrentPage"  :total="totaldata">
                </el-pagination>
            </div>
            </div>
        </el-card>
    </section>
</template>

<script>
    import {
        // ibmswritecommand
        deviceEventlist
    } from '../../url/api';
    // import { getDateArray } from '../../util/util'
    export default {
        props: ['devicedata','total'],
        data() {
            return {
                totaldata:0,
                formSearch: {
                    current: 1,
                    size: 8
                },
                maintainDataList: [
                //     {
                //     originTime: '2022-06-01',
                //     deviceName: '设备XX',
                //     type: '设备XX温度过高',
                //     content:'温度值大与25C°'
                // }, {
                //     originTime: '2022-06-02',
                //     deviceName: '设备XX',
                //     type: '设备XX温度过高',
                //     content:'温度值大与25C°'
                // }, {
                //     originTime: '2022-06-03',
                //     deviceName: '设备XX',
                //     type: '设备XX温度过高',
                //     content:'温度值大与25C°'
                // }, {
                //     originTime: '2022-06-04',
                //     deviceName: '设备XX',
                //     type: '设备XX温度过高',
                //     content:'温度值大与25C°'
                // }, {
                //     originTime: '2022-06-05',
                //     deviceName: '设备XX',
                //     type: '设备XX温度过高',
                //     content:'温度值大与25C°'
                // }, {
                //     originTime: '2022-06-06',
                //     deviceName: '设备XX',
                //     type: '设备XX温度过高',
                //     content:'温度值大与25C°'
                // }, {
                //     originTime: '2022-06-07',
                //     deviceName: '设备XX',
                //     type: '设备XX温度过高',
                //     content:'温度值大与25C°'
                // }, {
                //     originTime: '2022-06-08',
                //     deviceName: '设备XX',
                //     type: '设备XX温度过高',
                //     content:'温度值大与25C°'
                // },
            ],
                active: 'first',
                isShowTooltip: false,
                money: 0,
                moduleData: {},
                form: {},
                formdata: {},
                visible: false,
            }
        },
        watch: {
            devicedata(val) {
                //  console.log("卡片数据");
                console.log("卡片数据XXXXXXXXXXXXXXQQQQQQQQQ",val);
                // if(val.length > 0){
                    this.maintainDataList = val
                // }
            },
            total(val){
                if(val){
                    this.totaldata = val
                }
            }
            // moduleInfor(val) {
            //     //console.log(val)
            //     this.moduleData = val
            // },
        },
        methods: {
            handleCurrentPage(val) {//页码改变
                this.formSearch.current = val
                this.$emit('handleCurrentPage',val)
                //   this.getlist()
            },
            tableStyle({ row, column, rowIndex, columnIndex }) {//表格样式
                //console.log("行数：",rowIndex);
                if ((columnIndex * 1 + 1) % 2 == 0) {
                    return "background: transparent;color:#FFF;border-bottom: 1px solid #06ffda38;"

                } else {
                    return "background: transparent;color:#FFF;border-bottom: 1px solid #06ffda38;"
                }
            },
        },
        mounted(){
            
            // console.log("报警记录！");
            // if(this.devicedata){
            //     let params = {
            //         deviceId:this.devicedata.deviceId,
            //         deviceType:'honeywellAlarm',
            //         current:this.formSearch.current,
            //         size:this.formSearch.size,
            //     }
            //     console.log("报警记录！",params);
            //     deviceEventlist(params).then((res) => {
            //        if(res.data.ok){ 
            //            this.maintainData=res.data.data.records;
            //            this.total = res.data.data.total;
            //        }else{
            //            console.log("异常！");
            //        }
            //     });
            // }
        },
        components: {
        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;

        /* overflow-y: scroll; */
    }

    .itembox {
        margin-bottom: 10px;
    }

    .content {
        display: flex;
        color: #fff;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .content>div {
        width: 33.3%;
        height: 300px;
        padding: 10px
    }


    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .clearfix {
        /* text-align: center; */
        /* font-weight: 600; */
        /* font-style: italic; */
        color: rgb(255, 255, 255);
        letter-spacing: 2px;
        font-size: 13px;

    }

    .box-card {
        /* width: 480px; */
        /* height: 240px; */
        overflow: hidden;
        /* margin: 10px 0 0 10px; */
        background-color: rgba(7, 172, 194, 0.2);
    }

    .imgbox_img {
        width: 260px;
        height: 130px;
    }

    .box-card>>>.el-card__body {
        padding: 5px !important;
    }

    .box-card>>>.el-card__header {
        background-color: rgba(7, 172, 194, 0.1);
        padding: 10px !important;
    }

    /* 滚动条 */
    ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 3px;
    }

    ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
        background: #78b4b4;
    }

    ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
        border-radius: 10px;
        background: #ededed;
    }

    .el-form-item {
        margin-bottom: 0px !important;
    }

    .hangnei {
        display: flex;
        align-items: center;
    }

    .labelname {
        font-size: 12px;
        display: inline-block;
        width: 73px;
        padding: 0 10px;
        /* text-align: center; */
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .caozuok {
        display: inline-block;
        width: calc(100% - 90px);
    }

    .tabsdiv {
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .tabsdiv /deep/ .el-tabs__item {
        color: #ffffff;

    }

    .tabsdiv /deep/ .is-active {
        /* color: #409EFF; */
        border-bottom: 2px solid #409EFF;
    }

    .tabsdiv /deep/ .el-tabs__active-bar {
        display: none;
    }

    .tabsdiv /deep/ .el-tabs__nav-wrap::after {
        display: none;
    }

    .tabsdiv /deep/ .el-tabs__nav-wrap {
        border-bottom: 1px solid rgba(13, 182, 204, 0.6);
    }

    .sblable {
        margin-top: 10px;
        color: #a4f8f8;
        font-weight: 100;
        font-size: 13px;
    }

    .wbxinxi {
        background-color: rgba(2, 107, 121, 0.5);
        box-shadow: 5px 5px 10px rgb(1, 136, 160);
        margin-top: 15px;
        height: 80px;
        color: #fff;
    }

    .wbfzrval {
        font-size: 15px;
        line-height: 35px;
        text-align: center;
        color: #409EFF;
    }

    .wbfzrlb {
        color: #c3c6c7;
        line-height: 30px;
        text-align: center;
    }

    .phone {
        margin-left: 10px;
    }

    .wbzq {
        margin-bottom: 10px;
        color: rgb(211, 211, 211);
    }

    .wbzq1 {
        margin-bottom: 10px;
        color: #fff;
    }

    .wbjl {
        margin-top: 5px;
        background-color: rgba(2, 107, 121, 0.5);
        height: 185px;
        border: 0px solid rgb(161, 161, 161);
        color: rgb(211, 211, 211);
        font-size: 13px;
        overflow: auto;
        text-align: center;
    }

    .wbjumx {
        margin-bottom: 5px;
    }

    .sbname {
        color: #409EFF;
        margin-top: 10px;
    }

    /* 表格样式 */
    .table_box /deep/ .el-table--fit {
        /* padding: 20px 0; */
    }

    .table_box /deep/ .el-table,
    .el-table__expanded-cell {
        background-color: transparent;

    }

    .table_box /deep/ .el-table tr {
        background-color: transparent !important;
    }

    .table_box /deep/ .el-table--enable-row-transition .el-table__body td,
    .el-table .cell {
        background-color: transparent;

    }

    
    .pagination{
        /* color: #fff; */
        text-align: center;
    }
    .total{
        color: rgb(255, 255, 255);
    }
    .pagination /deep/.el-pagination .btn-prev{
       background-color: transparent;
    }
    .pagination /deep/ .el-pagination button:disabled {
    background-color: transparent;
}
.pagination /deep/ .el-pager li {
    background: transparent;
    /* color: rgb(212, 212, 212); */
}
/* .pagination /deep/ .el-pager li {
    color: #FFF;
}
.pagination /deep/ .active {
    color: #409EFF;
    cursor: default;
} */
.pagination /deep/ .el-pagination .btn-prev {
    background: center center no-repeat #24576b00;
    background-size: 0.083333rem;
    cursor: pointer;
    margin: 0;
    color: #eee;
}
.pagination /deep/ .el-pagination .btn-next {
    background: center center no-repeat #24576b00;
    background-size: 0.083333rem;
    cursor: pointer;
    margin: 0;
    color: #eee;
}
.pagination /deep/ .el-pagination .el-pager .number{
    color: #eee;
}
.pagination /deep/ .el-pagination .el-pager .active{
    color: #409EFF;
}
</style>